<template>
  <section class="todoapp">
    <hm-header 
    :list="list"
    @add-event="addEvent"
    ></hm-header>
    <!-- 前面的是变量可以改，后面的list是data中的数据 -->
    <hm-main :list="showList" 
    @all-event="allEvent"
    @change-event='changeEvent'
    @handle-event="handleEvent"></hm-main>
    <!-- 7:给底页写改清除的 首先给底页组件传数据 -->
    <hm-footer 
    @status-event="status = $event"
    @clear-event="clearEvent"
    :list="list"
    :status="status"
    ></hm-footer>
  </section>
</template>

<script>
// 12：让它在这个页面一直显示
// 创建一个对象 
const obj = {
"#/":'all',
"#/active":'done',
"#/completed":'undone'

};
import HmHeader from './components/hm-header.vue'
import HmMain from './components/hm-main.vue'
import HmFooter from './components/hm-footer.vue'
export default {
  components: {
    HmHeader,
    HmMain,
    HmFooter
  },
  data(){
    return {
      // 1：因为三个子组件都要用到数据，把数据写在父组件
      // 2：让其显示在main子组件上，先给子组件传值，
      list: JSON.parse(window.localStorage.getItem('list')) || [],
      // [
      //   { id: 1, name: "吃饭", done: false },
      //   { id: 2, name: "睡觉", done: true },
      //   { id: 3, name: "打豆豆", done: false },
      // ],
      // 9:约定一个变量，改变让其显示高亮  把这个值给到子组件 用计算属性去做

      // status:'all',
      // 12:让改的状态刷新不变
      status:obj[location.hash] || 'all'

    }
  },
  methods:{
    handleEvent(id){
      // 3:通过id找到索引，清除掉
    const index =   this.list.findIndex(item=>item.id === id)
    this.list.splice(index,1)
    },
    changeEvent(id){
      // 4:通过id找到其对象，对象再改done属性
      const obj = this.list.find(item=>item.id === id)
      obj.done = !obj.done
    },
    // 5：添加功能
    addEvent(name){
      // 5：核心思想，做一个新的obj给到数据就可以了
     const id = this.list.length ? this.list.slice(-1)[0].id + 1 : 1
     const obj = {
      id,
      name,
      done:false
     }
     this.list.push(obj)
    },
    // 6:反选
    allEvent(value){
      // 遍历这个属性，把每个done都改为value
    this.list =  this.list.map(item=>{
        item.done = value
        return item
      })
    },
  //   statuEvent($event){
  //  this.status = $event
  //   },
    // 8：清除已经完成的
    clearEvent(){
      // 找到已经完成的，再把它给到数据
    this.list =   this.list.filter(item=>item.done === false)
    }
  },
  // 10用计算属性改变状态
  computed:{
    showList(){
     if(this.status === 'all'){
        return this.list 

     }else if(this.status === 'done'){
      return this.list.filter(item=>item.done === true)
     }else{
      return this.list.filter(item=>item.done === false)
     }
    }
  },
  watch:{
   list:{
     handler(newvalue){
        window.localStorage.setItem('list',JSON.stringify(newvalue))
     }
   }

  }
}
</script>

<style></style>
